<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="zTree_v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        var tree = null;
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: -1
                }
            },
            view: {
                addHoverDom: addHoverDom,       // 用于当鼠标移动到节点上时，显示用户自定义控件。务必与 setting.view.removeHoverDom 同时使用
                removeHoverDom: removeHoverDom, // 用于当鼠标移出节点时，隐藏用户自定义控件。务必与 addHoverDom 同时使用
                dblClickExpand: false,//双击节点图标展开节点
                selectedMulti: false
            }

        }
        $(function () {
            $.ajax({
                url: "/ztreeTest",
                type: "POST",
                async: false,
                dataType: "json",
                contentType: 'application/json; charset=UTF-8',//防止乱码
                success: function (data) {
                    if (data.status == 200) {
                        tree = $.fn.zTree.init($("#tree"), setting, data.data);
                    }
                    if (data.status == 400) {
                        alert("获取信息失败!")
                    }

                }
            });
        });


        /*$(document).ready(function(){
            tree = $.fn.zTree.init($("#tree"), setting, data);
        });*/

    </script>
</head>
<body>
<div id="content">
    <ul id="tree" class="ztree" style="border:1px solid green;width:200px;"></ul>
</div>
</body>
</html>
